<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div class="mg-content">
             <el-row>
                <el-col :span="24">
                  <div  class="text-left" style="margin-bottom:20px">
                        <el-button v-hasPermission="'management_dishesStore:create'" class="title-button btn-primary" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新建库&nbsp;</el-button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <el-radio-group v-model="industry" size="medium" @change="changeIndustry" style="margin:auto 20px">
                      <el-radio-button value="" label="">全部</el-radio-button>
                      <el-radio-button value="ZC" label="ZC">餐饮</el-radio-button>
                      <!--<el-radio-button value="KC" label="KC">快餐</el-radio-button>-->
                      <el-radio-button value="HB" label="HB">烘焙</el-radio-button>
                      <el-radio-button value="SX" label="SX">生鲜</el-radio-button>
                      <el-radio-button value="LS" label="LS">零售</el-radio-button>
                    </el-radio-group>
                  </div>
                </el-col>
            </el-row>
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     :cell-class-name="getTableCellClassName"
                     :header-cell-class-name="getTableHeaderCellClassName"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="商品库名称">
                        <template  slot-scope="scope">
                            <!--<span>{{scope.row.name}}</span>-->
                          <el-button type="text" @click="goVegetableDepot(scope.row.id,scope.row.industry,scope.row.name)">{{scope.row.name}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="业态">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.industry && scope.row.industry=='ZC'">餐饮</span>
                            <span v-if="scope.row.industry && scope.row.industry=='KC'">餐饮</span>
                            <span v-if="scope.row.industry && scope.row.industry=='HB'">烘焙</span>
                            <span v-if="scope.row.industry && scope.row.industry=='SX'">生鲜</span>
                            <span v-if="scope.row.industry && scope.row.industry=='LS'">零售</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="原料数量">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.material_count">{{scope.row.material_count}}</span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="商品数量">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.dishes_count">{{scope.row.dishes_count}}</span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="套餐数量">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.pack_count">{{scope.row.pack_count}}</span>
                            <span v-else>0</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="创建时间">
                        <template  slot-scope="scope">
                            <span>{{scope.row.create_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="创建人">
                        <template  slot-scope="scope">
                            <span>{{scope.row.creator_name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.state">
                              <span v-if="scope.row.state=='NORMAL'" class="c-3" style="font-weight: bold"><i class="icon icon-qiyong"></i></span>
                              <span v-if="scope.row.state=='DISABLED'" class="c-1" style="font-weight: bold"><i style="font-size: 24px;" class="icon icon-tingyong"></i></span>
                              <!--{{scope.row.state.text}}--></span>
                        </template>
                    </el-table-column>

                  <el-table-column
                    label="操作" width="240">
                    <template slot-scope="scope" >
                      <el-button v-hasPermission="'management_dishes:show'" type="text" size="small" style="margin: 0px;" @click="goVegetableDepot(scope.row.id,scope.row.industry,scope.row.name)" >商品管理 | </el-button>
                      <!--<el-button type="text" size="small" style="margin: 0px;" @click="isAccount=true;activityId=scope.row.id,isEdit=true" v-if="scope.row.account_id!=null">编辑账号</el-button>-->
                      <span style="padding-top: 5px">
                        <el-button v-hasPermission="'management_dishesStore:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if="scope.row && scope.row.state=='DISABLED'" >启用</el-button>
                        <el-button v-hasPermission="'management_dishesStore:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if="scope.row && scope.row.state=='NORMAL'" >停用</el-button>
                        <!--<el-button  @click="updateState(scope.row.id,2)" v-if="scope.row.state && scope.row.state.key=='DISABLED'"  type="success" size="small" icon="el-icon-remove-outline" ></el-button>
                        <el-button  @click="updateState(scope.row.id,1)" v-if="scope.row.state && scope.row.state.key=='NORMAL'" type="danger" size="small" icon="el-icon-circle-check-outline" ></el-button>-->
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    import ElCol from "element-ui/packages/col/src/col";
    export default{
        data(){
            return {
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                addShow:false,
                activityId:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
                industry:"" //商业
            }
        },
        components: {
          ElCol,
          model
        },
        created(){
          //
            window.this = this;
            this.initData();
        },
        methods: {
          changeIndustry(e){
            this.initData();
          },
          goVegetableDepot(id,type,name){
            // store.commit('',{dishesKuId:id});
           window.localStorage.setItem("dishKuId",id);
           window.localStorage.setItem("dishKuType",type);
           window.localStorage.setItem("dishKuName",name);
            this.router.push({path:"vegetableDepot/add"});
          },
          updateState(id,item){
            var st='停用';
            if(item==1){
              st='停用';
            }else{
              st='启用';
            }
            this.$confirm('确定将状态改为'+st+', 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.get("dishes/dishesStores/updateState?id="+id).then(data => {
                if(data.success){
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  });
                  this.initData();
                }else{
                  this.$message({
                    type: 'error',
                    message: data.message
                  });
                }
              })
            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消修改状态'
              // });
            });
          },
          getTableCellClassName(){
            return "table_cell_style";
          },
          getTableHeaderCellClassName(){
            return "table_header_cell_style";
          },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.industry ="";
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                this.loading=true;
                var se = "";
                if(this.industry){
                  se += "&search.industry_eq="+this.industry;
                }
                this.$axios.get("dishes/dishesStores?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue+se).then((data)=>{
                    this.loading=false
                    this.tableData=data.content.dishesStorePage.content;
                    this.total=data.content.dishesStorePage.totalElements
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("dishes/dishesStores/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            addSuccess(item){
                this.addShow=false;
                this.initData();
            },
            addClose(){
                this.addShow=false;
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
        }
    }
</script>
<style scoped>
</style>
